//产品管理 - 产品信息

import React, { Component } from 'react';
import { LocaleProvider, Form , Row, Col, Table, Switch, Icon, Input, Tag } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import TitleBtn from '../../../components/TitleBtn';

const FormItem = Form.Item;
const { Column } = Table;

const data = [];
for (let i = 0; i < 1; i++) {
  data.push({
		key: i,
    productLogo: '暂无',
    productName: '白鲨钱包',
    productType: 'App',
    updateTime: '2018-12-13 17:39:18',
    repaySwitch: '',
    cz: ''
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Info extends Component {

	handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
    const { getFieldDecorator } = this.props.form;
    
		return (
      <LocaleProvider locale={zh_CN}>
        <div className='apply'>
          <div>
            <Icon type="appstore" />
            <span className="apply-font">产品信息</span>
            <TitleBtn />
          </div>
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={6}>
                  <FormItem>
                    {getFieldDecorator('productName', {
                      rules: [{ required: true, message: 'Please input your productName!' }],
                    })(
                      <Input placeholder="产品名称" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }} />
                    )} 
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='产品Logo' align='center' dataIndex='productLogo' width='80' />
              <Column title='产品名称' align='center' dataIndex='productName' width='80' />
              <Column title='产品类型' align='center' dataIndex='productType' width='80' />
              <Column title='更新时间' align='center' dataIndex='updateTime' width='80' />
              <Column title='借款开关' align='center' dataIndex='repaySwitch' width='400' 
                render={repaySwitch => (
                  <span>
                     <Switch defaultChecked />
                  </span>
                )} />
              <Column title='操作' align='center' dataIndex='cz' width='530px' 
                render={cz => (
                  <span>
                    <Tag color="blue" key='pDeploy'>产品配置</Tag>
                    <Tag color="blue" key='proDefinition'>流程定义</Tag>
                    <Tag color="green" key='noteDeploy'>短信配置</Tag>
                    <Tag color="green" key='contractDeploy'>合同配置</Tag>
                    <Tag color="green" key='consultDeploy'>协议配置</Tag>
                    <Tag color="orange" key='commonQuestion'>常见问题</Tag>
                    <Tag color="orange" key='otherSettings'>其他设置</Tag>
                  </span>
                )} />
            </Table>
          </div>
        </div>
      </LocaleProvider>  
		);
	}
}

const InfoForm = Form.create()(Info);

export default InfoForm;